<script setup lang="ts">

defineProps<{
  show: boolean
}>()
</script>

<template>
  <div
    class="absolute top-0 left-0 w-full h-full flex items-center rounded-2xl justify-center flex-col transition-all bg-gray-200 bg-opacity-50 backdrop-blur-sm"
    :class="{
      'opacity-0 z-[-1] duration-1000': !show,
      'opacity-100 z-0 duration-200': show
    }"
  >
    <div class="loader"></div>
    <span class="text-black text-16px mt-5"></span>
  </div>
</template>

<style scoped lang="scss">
.loader {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 20px;
  border-radius: 5px;
  background:linear-gradient(90deg,#000 50%,#0000 0) right/200% 100%;
  animation: l21 3s infinite linear;
}
.loader::before {
  content :"切换应用中...";
  color: #0000;
  padding: 0 5px;
  border-radius: 5px;
  background: inherit;
  background-image: linear-gradient(90deg,#fff 50%,#000 0);
  -webkit-background-clip:text;
          background-clip:text;
}

@keyframes l21{
  100%{background-position: left}
}
</style>
